<script lang="ts" setup>
import { addCollectArticle, getActData, getCompetitionActivity, getFloodData, getFloodListData, getHealthBigData, getHealthData, getHealthworks, getkpzlList, getLectureData, getLiveData, getPrizeWinningdata, getSurveyActivity, getxchdList } from '~/api/home'

const route = useRoute()
const id = ref('')
const title = ref('')
const detailNmae = ref('')

const routePath = [{ name: '首页', path: '/' }, { name: '宣传活动', path: '/peopleHealth/HealthActivity' }, { name: route.params.id.split('&')[1] }]

const queryParams = reactive<{
  page: {
    rownumber: number
    pageNo: number
  }
  condition?: any[]
  positions?: string
}>(
  {
    page: {
      rownumber: 10,
      pageNo: 1,
    },
    positions: '首页',
  },
)
function shareClick() {
  const currentPath = window.location.href
  navigator.clipboard.writeText(currentPath)
    .then(() => {
      ElMessage.success('已复制当前页面链接，可以去分享啦~')
    })
    .catch((err) => {
      ElMessage.error('复制失败,请稍后再试')
    })
}
const store = useUserStore()
function showLogin() {
  store.setLoginVisible(true)
}
async function onCollect(id: any) {
  try {
    const res = await addCollectArticle([123455])
    console.log('res', res)
    if (res.resultCode == '0011') {
      showLogin()
    }
    if (res.state == 'SUCCESS') {
      ElMessage.success('收藏成功')
    }
  }
  catch (error) {
    ElMessage.success(error)
  }
}
const dataInit = ref()
async function getPopularScienceMaterialsData() {
  try {
    const res = await getkpzlList(queryParams)
    dataInit.value = res.data[0]
  }
  catch (error) {

  }
}
async function getAwardWinningworksData() {
  try {
    const res1 = await getPrizeWinningdata(queryParams)
    dataInit.value = res1.data[0]
    console.log(dataInit.value)
  }
  catch (error) {

  }
}
const siderData = ref()
async function getSiderdata() {
  try {
    const res2 = await getxchdList({

      page: {
        rownumber: 10,
        pageNo: 1,
      },
      order: [{
        colName: 'release_time',
        orderType: 'desc', // asc升序 desc降序
      }],

      positions: '首页',
    })

    siderData.value = res2.data.filter((item) => {
      return item.column_recommendation == '是'
    })
    console.log('res3333', siderData.value)
  }
  catch (error) {

  }
}
function change(itemdata: any) {
  dataInit.value = itemdata
}
async function initdata() {
  const arr = route.params.id.split('&')
  console.log(arr[1] == '1')

  id.value = arr[0]
  queryParams.condition = [{ colName: 'id', ruleType: 'eq', value: id.value }]
  console.log('queryParams', queryParams)

  let res
  switch (arr[1]) {
    case '社区活动':
      res = await getActData(queryParams)
      break
    case '论坛讲座':
      res = await getLectureData(queryParams)
      break
    case '问卷调查':
      res = await getSurveyActivity(queryParams)
      break
    case '知识竞答':
      res = await getCompetitionActivity(queryParams)
      break
    case '在线直播':
      res = await getLiveData(queryParams)
      break
    case '卫生宣传日':
      res = await getHealthData(queryParams)
      break
    case '职业健康作品征集大赛':
      res = await getHealthworks(queryParams)
      break
    case '知汛防汛':
      res = await getFloodListData(queryParams)
      break
    case '健康陕西行动知行大赛':
      res = await getHealthBigData(queryParams)
    case '推荐':
      res = await getxchdList(queryParams)
      break
    default:
      break
  }
  if (res && res.data.length) {
    dataInit.value = res.data[0]
  }
  else {
    dataInit.value = {}
  }
}
const router = useRouter()
function backhis() {
  router.back()
}

onMounted(() => {
  initdata()

  getSiderdata()

  // getData(route.params.id)
})
</script>

<template>
  <div class="bg-[url('/img/index.png')] bg-#F7F9FD bg-no-repeat">
    <PublicSearch type="健康陕西" />
    <PublicSearchDialog type="健康陕西" />

    <div class="px-40">
      <div class="bg-#fff">
        <CommonPageContainer :title="title" :path="routePath">
          <div class="mt-20px flex justify-between">
            <div class="mr-24px w-81% rounded-tl bg-#F7F9FD px-40px py-26px">
              <div class="flex items-center">
                <div
                  class="ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center" style="border-radius: 6px;
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);" @click="backhis"
                >
                  <div
                    style="width: 18px;
                                        height: 18px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        border-radius:50%;
                                        background-color: rgba(255,255,255,1);"
                  >
                    <span style="color:#0E9472;margin-left: -2px;">
                      <i class="i-ri-arrow-left-s-line" />
                    </span>
                  </div>
                </div>
                <div class="ml-14px" text="20px #0E9472">
                  宣传活动
                </div>
                <!-- <div text="14px #C7C7CC " class="flex items-center">
                                    <div class="px-14px">|</div>
                                    <div style="padding-top: 1px;">HEALTHY propaganda</div>
                                </div> -->
              </div>
              <div v-if="dataInit && dataInit.title_name.length">
                <div class="flex items-center pb-12px pt-24px" text="32px #101010">
                  <span>
                    {{ dataInit.title_name }}
                  </span>
                  <ClientOnly>
                    <TextToSpeak :text="`${dataInit.title_name}${getTextFromHtml(dataInit.contents)}`" :fixed="false" font-size="16px" size="30px" />
                  </ClientOnly>
                </div>
                <div class="pb-24px" text="18px #424242">
                  {{ dataInit.release_time }}
                </div>
                <div v-html="addControlsList(dataInit.contents)" />
              </div>
              <div class="flex items-center justify-center pb-46px pt-65px" text="16px #101010">
                <div class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white" @click="onCollect">
                  <img class="pr-12px" src="/img/black_heart.png" alt="">
                  收藏
                </div>
                <div class="h-42px w-100px flex cursor-pointer items-center justify-center bg-white" @click="shareClick">
                  <img class="pr-12px" src="/img/share.png" alt="">
                  分享
                </div>
              </div>
            </div>
            <div class="w-19%">
              <div>
                <div
                  class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                >
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div class="rounded-bl rounded-br px-10px py-5px" border="2px solid #50bc8d">
                  <div v-for="item in siderData" :key="item.id" class="cursor-pointer" @click="change(item)">
                    <img :src="item.cover_file_name" alt="" style="width:100%;height: 124px;object-fit: cover;">
                    <div class="py-10px" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <Login />
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style></style>
